<template>
  <div class="Box" ref="hearder">
    <div class="container">
      <h1 class="left_Logo">
        <img src="https://www.xuexiluxian.cn/resources/images/index/logo.png" alt="" />
      </h1>
      <slot />
      <div class="right">
        <a href="javascript:;" v-if="!token" @click="router.push('/login')">登录/注册</a>
        <div class="user_img" v-else>
          <img
            src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqEQib1hoJ1Xtfwyuqctcxx2GVkqbfdjmNa6CsvGjK5p6ozGESicj9zKEgW3JAsyibAlOJUr9AGPGmpA/132"
            alt="" />
          <el-button type="danger" @click="OutLoginHandler">退出登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import useUserStore from "../../store/user";
import { req_Out_login } from "../../api/req_fun";
import { RemoveToken } from "../../utils/Token";
// 数据
const UserStore = useUserStore();
const { token } = storeToRefs(UserStore);
const router = useRouter();

const OutLoginHandler = () => {
  req_Out_login().then((res) => {
    if (res.data.meta.code) {
      //   清理token
      RemoveToken();
      router.push("/home/index");
    }
  });
};
</script>

<style lang="less" scoped>
.Box {
  width: 100%;
  height: 7.1429vw;
  box-shadow: 0 3px 20px 10px #cccc;

  .container {
    width: 81.4286vw;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left_Logo {
      width: 10vw;
      height: 7.1429vw;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .right {
      .user_img {
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
